<?php
include_once("../../php/include_all.php");
session_start();
?>
<div class="row-fluid">
	<div class="span12">
		<h3 class="page-title">
            <b>Data Proyeksi</b>
        </h3>
		       <a href="#modalwin" data-toggle="modal" class="btn btn-primary btn-tambah">Tambah Data</a>
        <div id="modalwin" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

             <header class="modal-header">
			<a href="#" class="close geo-clear" data-dismiss="modal">x</a>
                <h3>Data Proyeksi</h3>
            </header>
            <div class="modal-body">
              <form id="form_proyeksi"  class="form-horizontal">
					<input type="hidden" name="act" value="proyeksi_action">
					<input type="hidden" id="id_proyeksi" name="id_proyeksi" value="0">
					<div class="control-group">
                        <label class="control-label">Indikator</label>
                        <div class="controls">
                            &nbsp;&nbsp;&nbsp;&nbsp;<select name="id_indikator" id="id_indikator">
								<option id="id_ind" value="0">Pilih salah satu</option>
								<?php
								$ind = get_datas("SELECT * from spm_indikator i,spm_jenis_pelayanan j where i.id_skpd=".$_SESSION['_id']." AND i.id_pelayanan=j.id_pelayanan order by i.id_pelayanan");
								foreach($ind as $ind){
								?>
									<option value=<?php echo $ind['id_indikator']; ?>><?php echo $ind['nama_indikator']; ?></option>
								<?php
								}
								?>
							</select>
                        </div>
					</div>
					<div class="control-group">
                        <label class="control-label">Batas Capaian</label>
                        <div class="controls">
                            &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="batas_capaian" name="batas_capaian" class="input-small" readonly />
                        </div>
					</div>
					<div class="control-group">
                        <label class="control-label">Nilai SPM</label>
                        <div class="controls">
                            &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="nilai_spm" name="nilai_spm" class="input-small" readonly />
                        </div>
					</div>
					<div class="control-group">
                        <label class="control-label">Tahun Proyeksi :</label>
						<div class="controls">
                            1.&nbsp;<input type="text" id="thn_pertama" name="thn_pertama" class="input-small" readonly />&nbsp; 
							&nbsp;Target Capaian&nbsp;
							<input type="text" id="target_pertama" name="target_pertama" class="input-small" />
                        </div>
						<div class="controls">
                            2.&nbsp;<input type="text" id="thn_kedua" name="thn_kedua" class="input-small" readonly />&nbsp; 
							&nbsp;Target Capaian&nbsp;
							<input type="text" id="target_kedua" name="target_kedua" class="input-small" />
                        </div>
						<div class="controls">
                            3.&nbsp;<input type="text" id="thn_ketiga" name="thn_ketiga" class="input-small" readonly />&nbsp; 
							&nbsp;Target Capaian&nbsp;
							<input type="text" id="target_ketiga" name="target_ketiga" class="input-small" />
                        </div>
						<div class="controls">
                            4.&nbsp;<input type="text" id="thn_keempat" name="thn_keempat" class="input-small" readonly />&nbsp; 
							&nbsp;Target Capaian&nbsp;
							<input type="text" id="target_keempat" name="target_keempat" class="input-small" />
                        </div>
						<div class="controls">
                            5.&nbsp;<input type="text" id="thn_kelima" name="thn_kelima" class="input-small" readonly />&nbsp; 
							&nbsp;Target Capaian&nbsp;
							<input type="text" id="target_kelima" name="target_kelima" class="input-small" />
                        </div>
					</div>
					
                        <a class="btn btn-primary bt-simpan-proyeksi"><div id="loader" style="margin-top:2px"></div>&nbsp;Save</a>
                                <span id="result"></span>
				</form>
            </div>
		</div>
	</div>
	</div>
	</br>
	<div class="row-fluid">
        <div class="span12">
			<div class="widget" style="">
                <div class="widget-title">
                    <h4><i class="icon-reorder"></i>Tabel Proyeksi</h4>
                    <span class="tools">
                        <a href="javascript:;" class="icon-chevron-down"></a>
                    </span>
                </div>
				<div class="widget-body">
                    <table class="table table-striped table-bordered" id="sample_1">
                    <thead>
                        <tr>
                            <th rowspan = "3" class="hidden-phone" style="width:20px; text-align:center;">No</th>
                            <th rowspan = "3"style="text-align:center;">Indikator</th>
                            <th rowspan = "3"style="text-align:center;">Batas Capaian</th>
                            <th rowspan = "3"style="text-align:center;">%</th>
                            <th colspan="10" style="text-align:center;">Proyeksi</th>
							<th rowspan = "3"style="text-align:center;"></th>
							</tr>
							<tr>
							<th colspan="2" style="text-align:center;">1</th>
							<th colspan="2" style="text-align:center;">2</th>
							<th colspan="2" style="text-align:center;">3</th>
							<th colspan="2" style="text-align:center;">4</th>
							<th colspan="2" style="text-align:center;">5</th>
							</tr>
							<tr>
							<th style="text-align:center;">Tahun</th>
							<th style="text-align:center;">Target</th>
							<th style="text-align:center;">Tahun</th>
							<th style="text-align:center;">Target</th>
							<th style="text-align:center;">Tahun</th>
							<th style="text-align:center;">Target</th>
							<th style="text-align:center;">Tahun</th>
							<th style="text-align:center;">Target</th>
							<th style="text-align:center;">Tahun</th>
							<th style="text-align:center;">Target</th>
							</tr>
                        
                    </thead>
                    <tbody id="tb-proyeksi">
					<?php 
					$no=1;
					$proy = get_datas("SELECT * FROM spm_indikator i,spm_proyeksi p where i.id_skpd=".$_SESSION['_id']." AND i.id_indikator=p.id_indikator");
					foreach ($proy as $proy){
					?>
						<tr>
							<td><?php echo $no ?></td>
							<td><?php echo $proy['nama_indikator'];?></td>
							<td><?php echo $proy['tahun_batas_capaian']?></td>
							<td><?php echo $proy['nilai_spm']?></td>
							<td><?php echo $proy['thn_pertama']?></td>
							<td><?php echo $proy['target_pertama']?></td>
							<td><?php echo $proy['thn_kedua']?></td>
							<td><?php echo $proy['target_kedua']?></td>
							<td><?php echo $proy['thn_ketiga']?></td>
							<td><?php echo $proy['target_ketiga']?></td>
							<td><?php echo $proy['thn_keempat']?></td>
							<td><?php echo $proy['target_keempat']?></td>
							<td><?php echo $proy['thn_kelima']?></td>
							<td><?php echo $proy['target_kelima']?></td>
							<td>
							<a href="#modalwin" data-toggle="modal" class="btn-edit-proyeksi" name="<?php echo $proy['id_proyeksi'];?>"><i class="icon-edit"></i></a>
							<a href="#" class="btn-delete-proyeksi" name="<?php echo $proy['id_proyeksi']; ?>"><i class="icon-trash"></i></a>
						</td>
						</tr>
						<?php 
						$no++;
						}
						?>
					</tbody>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="../assets/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="../assets/data-tables/DT_bootstrap.js"></script>
<script>
    jQuery(document).ready(function() {       
         // initiate layout and plugins
        App.init();
    });
</script>

<script>
var urls = 'master_proyeksi/proyeksi_action.php';

$('#id_indikator').change(function(){
    source ="master_proyeksi/get_data.php?idi="+this.value;
    var coba=$.get(source);
    coba.done(function(res){
	$hasil = res.split('__');	
		if($hasil.length==6){
		document.getElementById('batas_capaian').value=$hasil[2];
		document.getElementById('nilai_spm').value=$hasil[5];
		document.getElementById('thn_pertama').value=(parseInt($hasil[1]));
		document.getElementById('thn_kedua').value=(parseInt($hasil[1])+1);
		document.getElementById('thn_ketiga').value=(parseInt($hasil[1])+2);
		document.getElementById('thn_keempat').value=(parseInt($hasil[1])+3);
		document.getElementById('thn_kelima').value=(parseInt($hasil[1])+4);
		}	
    })
});
	
$('.bt-simpan-proyeksi').click(function(){
	var btn  = $(this);
	var load = $('#loader');
	var rslt = $('#result');
	load.addClass('spinner pull-left');
	btn.removeClass('btn-primary').addClass('btn-info');
	
	var form = $('#form_proyeksi');
	var data = form.serializeArray();
	var post = $.post(urls,data);
	post.done(function(res){
		var result = res.split('__');
		//   0      1     2
		//success__id__(isi tbody)tr
		if(result.length==3){
			if(result[0]=='success'){
				rslt.html('<font color="green">tersimpan...</font>');
				setTimeout(function(){
					rslt.html('');
				},1500);
				var tbody = $('#tb-proyeksi');
				tbody.html(result[2]);
				$('#id_tahun_capaian').val(0);
				document.getElementById('form_proyeksi').reset();
				 //$('#thn_angg').val(' ');
				init();
			}else{
				rslt.html('<font color="red">'+res+'</font>');
			}
		}else{
			rslt.html('<font color="red">'+res+'</font>');
		}
		load.removeClass();
		btn.removeClass('btn-info').addClass('btn-primary');
	});
});
	
function init(){
$('.btn-delete-proyeksi').click(function(){
			var btn = $(this);
			var pid = this.name;
			var load = $(this);
			bootbox.confirm("Anda akan menghapus bidang ini?", function(result) {
                if(result==true){
                    if(pid!=0){
                        var post = $.post(urls,{act:"del_proyeksi",id_proyeksi:pid});
                        post.done(function(res){
                            var hasil = res.split('__');
						if(hasil.length==2){
							if(hasil[0] == 'success'){
								var tbody = $('#tb-proyeksi');
								tbody.html(hasil[1]);
								init();
									}
								}
                        });
                        load.html('<i class="icon-trash">');
                    }
                }else{
                    load.html('<i class="icon-trash">');
                }
            });
		});
	
	$('.btn-edit-proyeksi').click(function(){
		var pid = this.name;
		var form = $('#form_proyeksi');
		var post = $.post(urls,{act:'edit_proyeksi',id_proyeksi:pid});
		post.done(function(res){
			var value = res.split('__');
			$('#id_proyeksi').val(value[0]);
				form.find('select[name="id_indikator"]').val(value[1]);
				form.find('input[name="batas_capaian"]').val(value[2]);
				form.find('input[name="nilai_spm"]').val(value[3]);
                form.find('input[name="thn_pertama"]').val(value[4]);
                form.find('input[name="target_pertama"]').val(value[5]);
				form.find('input[name="thn_kedua"]').val(value[6]);
                form.find('input[name="target_kedua"]').val(value[7]);
				form.find('input[name="thn_ketiga"]').val(value[8]);
                form.find('input[name="target_ketiga"]').val(value[9]);
				form.find('input[name="thn_keempat"]').val(value[10]);
                form.find('input[name="target_keempat"]').val(value[11]);
				form.find('input[name="thn_kelima"]').val(value[12]);
                form.find('input[name="target_kelima"]').val(value[13]);
				$('#id_indikator').attr('disabled',true);
		});
	});
}
$('.geo-clear').click(function(){
	$('#id_proyeksi').val(0);
	document.getElementById('form_proyeksi').reset();
	$('#id_indikator').attr('disabled',false);
});

init();
</script>